﻿@model IEnumerable<string>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<br />
<br />
<br />

@using (Html.BeginForm("Result", "Search", FormMethod.Post))
{

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-8 ">
                @{
    if (@Session["valueError"] != null)
    {
                    <div style="color: red">
                        @Session["valueError"].ToString()
                    </div>
        Session["valueError"] = "";
    }
                }
                <select data-placeholder="Choose items" class="form-control ingredients-lookup" multiple tabindex="4" name="search" id="search">
                    <option value=""></option>
                    @foreach (var item in Model.ToList())
                    {
                        <option value="@Html.DisplayFor(modelitem => item)">@Html.DisplayFor(modelitem => item)</option>
                    }
                </select>
            </div>
            <div class="col-md-2">
                <button type="submit" name="search_rec" class="btn btn-primary" value="simple">Search</button>
            </div>
            <div id="adv_search_link" class="col-md-2">
                <a style="margin-left: -10px" href="#" onclick="showHide('advance_search')">Advanced search</a>
            </div>
        </div>
        <div class="row">
            <div id="advance_search" style="display: none">
                <div class="col-md-8 ">
                    <div class="row">
                        <div class="col-md-2">
                            @Html.Label("Calories")
                        </div>
                        <div class="col-md-3">
                            <input type="text" placeholder="Min" class="form-control" name="search" />
                        </div>
                        <div class="col-md-3">
                            <input type="text" placeholder="Max" class="form-control" name="search" />
                        </div>
                        <div>
                            <label class="unitLabelSearch">cal</label>
                        </div>

                    </div>
                    <br />
                    <div class="row">
                        <div class="col-md-2">
                            @Html.Label("Fat")
                        </div>
                        <div class="col-md-3">
                            <input type="text" placeholder="Min" class="form-control" name="search" />
                        </div>
                        <div class="col-md-3">
                            <input type="text" placeholder="Max" class="form-control" name="search" />
                        </div>
                        <div>
                            <label class="unitLabelSearch">grams</label>
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <div class="col-md-2">
                            @Html.Label("Carbohydrate")
                        </div>
                        <div class="col-md-3">
                            <input type="text" placeholder="Min" class="form-control" name="search" />
                        </div>
                        <div class="col-md-3">
                            <input type="text" placeholder="Max" class="form-control" name="search" />
                        </div>
                        <label class="unitLabelSearch">grams</label>
                    </div>
                    <br />
                    <div class="row">
                        <div class="col-md-2">
                            @Html.Label("Protein")
                        </div>
                        <div class="col-md-3">
                            <input type="text" placeholder="Min" class="form-control" name="search" />
                        </div>
                        <div class="col-md-3">
                            <input type="text" placeholder="Max" class="form-control" name="search" />
                        </div>
                        <label class="unitLabelSearch">grams</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
}


<script type="text/javascript">
    function showHide(divId) {
        var theDiv = document.getElementById(divId);
        if (theDiv.style.display == "none") {
            theDiv.style.display = "";
        } else {
            theDiv.style.display = "none";
        }
    }
</script>
